<template>
  <el-form-item :class="getClz()" :label="opt.text" :prop="opt.name" v-if="!opt.hide"  v-bind="opt.itemProps">
    <el-input v-model="data[opt.name]"
      :name="opt.name"
      :placeholder="opt.props.disabled?'':opt.placeholder"
      v-bind="opt.props"
      @blur="onBlur(data,column)"
      @change="onChange(data,column)"
      @keyup.enter.native="onKeyup(data,column)"
    >
      <el-button slot="append" :loading="loading" :disabled="time" @click="sendMsg(60)">{{getMsgText()}}</el-button>
    </el-input>
  </el-form-item>
</template>

<script>
    import extend from '../extend';
    let Log = ()=>{};

    export default {
      name: "FormInput",
      mixins:[extend],
      data(){
        return {
          time:0,
          loading:false,
          opt:{
            name:'',
            text:'',
            className:'',
            itemProps:{},
            props:{
                type:'text',
                disabled:false
            },
            hide:false,
            placeholder:'',
            formatter:(v)=>{return v}
          }
        }
      },
      created(){
        this.initOptions();
        this.onBlur = this.column.onBlur||Log;
        this.onChange = this.column.onChange||Log;
        this.onKeyup = this.column.onKeyup||Log;
      },
      methods:{
        setValue(val){
          if(val !== void 0){
            this.data[this.opt.name] = this.opt.formatter(val);
          }
        },
        sendMsg(val){
          sendMsg((o)=>Object.assign(this,o))
        },
        getMsgText(){
          let time = this.time;
          return time > 0 ? `已发送（ ${time}s ）` : `发送短信`
        }
      }
    }

    // sendMsg
    function sendMsg(render){
      let timer = null;
      let timeFun = function(val){
        // console.log(val)
        render({time:val});
        //
        clearTimeout(timer);
        if(val>0){
          timer = setTimeout(()=>{
            timeFun(--val)
          },1000)
        }
      }
      //
      render({loading:true});
      render({loading:false});
      timeFun(30);
    }
</script>
